<template>
  <div class="recently-content">
    <el-row class="search-wrap">
      <el-form label-width="75px" style="max-width: 460px">
        <el-form-item label="最近操作" class="search-input-item">
          <el-autocomplete
              v-model="searchInput"
              :fetch-suggestions="querySearch"
              :trigger-on-focus="false"
              clearable
              class="inline-input w-50"
              placeholder="请输入"
              @select="handleSelect"
              @change="handleInput"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="recently-search-result">
      <el-table
          v-el-table-infinite-scroll="selectMore"
          ref="tableRef"
          :data="tableData"
          class="result-table"
          height="100%"
      >
        <el-table-column
            prop="type"
            label="类型"
            width="680"
            :filters="type"
            :filter-method="filterHandler"
        >
          <template #default="scope">
            <div class="doc-item" style="display: flex; align-items: center">
              <!--              <img :src="require(`@/assets/img/document/`+scope.row.suffix+`.png`)" class="image-size"/>-->
              <component :is="fileType(scope.row.suffix)"></component>
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="上传者" width="150"/>
        <el-table-column prop="createTime" label="操作时间" align='center' sortable/>
        <el-table-column prop="operateType" :filters="operateType" :filter-method="filterOperateHandler"
                         label="操作类型" align='center'>
          <template #default="scope">
            <div>
              <span v-if="scope.row.operateType === 1">上传</span>
              <span v-if="scope.row.operateType === 2">下载</span>
              <span v-if="scope.row.operateType === 3">查看</span>
              <span v-if="scope.row.operateType === 4">删除</span>
              <span v-if="scope.row.operateType === 5">收藏</span>
              <span v-if="scope.row.operateType === 6">重命名</span>
              <span v-if="scope.row.operateType === 7">移动</span>
            </div>
          </template>
        </el-table-column>
        <template #append>
          <div style="width: 100%; height: 80px;text-align: center">
            <!--              <el-link type="info" :underline="false" @click="selectMore()" v-if="disable">查看更多...</el-link>-->
            <el-icon class="is-loading" size="20" v-if="loadingDisable">
              <Loading/>
            </el-icon>
          </div>
        </template>
      </el-table>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
// import {useStore} from 'vuex'
import FrontApi from '@/api/front'
import useComputedFileType from "@/hook/useComputedFileType";
// import router from "@/router";
// const store = useStore()
const searchInput = ref('');


const tableData = ref([])
const type = ref([])

const operateType = [
  {
    "text": "上传",
    "value": 1
  },
  {
    "text": "下载",
    "value": 2
  },
  {
    "text": "查看",
    "value": 3
  },
  {
    "text": "删除",
    "value": 4
  },
  {
    "text": "收藏",
    "value": 5
  },
  {
    "text": "重命名",
    "value": 6
  },
  {
    "text": "移动",
    "value": 7
  },

]
const fileType = useComputedFileType()


const getDocumentType = () => {
  FrontApi.getDocumentType().then(res => {
    res.data.forEach(e => {
      const t = {
        "text": e.dictLabel,
        "value": e.dictValue
      }
      type.value.push(t);
    })
  })
}

const restaurants = ref([])
// 计算初始记录数
const TAB_CONTENT = document.querySelector('#shareSpaceId .el-tabs__content')
const CONTENT_HEIGHT = TAB_CONTENT.clientHeight
const RECORD_HEIGHT = 5 // 一条记录的高度
const page = ref(Math.trunc(CONTENT_HEIGHT / rootFontSize / RECORD_HEIGHT))

const total = ref();
const disable = ref()
const loadingDisable = ref(false)
const documentName = ref('')
const getPersonalRecent = () => {
  FrontApi.getPersonalRecent(null, documentName.value, page.value).then(res => {
    tableData.value = res.data.list;
    total.value = res.data.total
    disable.value = page.value < total.value
  })
}
const getAllPersonRecentData = () => {
  FrontApi.getPersonalRecent(null, null, null).then(res => {
    const arr = [];
    for (let i = 0; i < res.data.list.length; i++) {
      //临时对象
      let obj = {
        //属性1
        value: res.data.list[i].name,
        //属性2
        link: res.data.list[i].name,
      };
      arr.push(obj);
    }
    restaurants.value = arr;
  })
}
const selectMore = () => {
  disable.value = false
  if (page.value < total.value) {
    loadingDisable.value = true;
    setTimeout(() => {
      page.value += 6;
      getPersonalRecent()
      loadingDisable.value = false;
    }, 1000)
  }
}
// const enterPreview = (docId) => {
//   store.state.spaceDocId = docId
//   router.push({name: "DetailPreview"})
// }
const querySearch = (queryString, cb) => {
  const results = queryString
      ? restaurants.value.filter(createFilter(queryString))
      : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
    )
  }
}
const filterHandler = (value, row) => {
  return row.type === value
}
const filterOperateHandler = (value, row) => {
  return row.operateType === value
}

const handleSelect = (item) => {
  documentName.value = item.value;
  getPersonalRecent()
}
const handleInput = (item) => {
  documentName.value = item.value;
  getPersonalRecent(item.value)
}
onMounted(() => {
  getDocumentType();
  getPersonalRecent();
  getAllPersonRecentData();
});

</script>
<style scoped>
:deep(.el-table) {
  --el-border-color-lighter: #ebeef500
}

.recently-content {
  padding-left: 2rem;
  height: 100%;
}

:deep(.el-table .cell) {
  padding-left: 1.2rem;
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
  --el-select-input-focus-border-color: #00A298;
}

.el-input {
  width: 300px;
  --el-input-focus-border: #00A298;
  --el-input-focus-border-color: #00A298;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.search-wrap {
  padding-top: 2rem;
}

.search-input-item {
  height: 4rem;
  margin-bottom: 2rem;
  padding-left: 1.2rem;
  align-items: center;
}

.search-input-item :deep(.el-form-item__label) {
  justify-content: flex-start;
}

.recently-search-result {
  height: calc(100% - 8rem);
}

.result-table {
  height: 100%;
  width: 100%;
}

:deep(tbody .el-table__row) {
  height: 5rem;
}

:global(.el-table-filter__bottom button) {
  padding-left: 10%;
}

.image-size {
  width: 32px;
  height: 32px;
}

.doc-item svg {
  width: 32px;
  height: 32px;
}
</style>
